<template>
  <div>用户列表</div>
  <el-table :data="currentList" style="width: 100%">
    <el-table-column prop="userid" label="用户id" />
    <el-table-column prop="tel" label="手机号" />
    <el-table-column label="操作" width="130">
      <template #default="scope">
        <el-button type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 20px; justify-content: flex-end"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5, 10, 20, 50]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script>
import { userListApi } from "@/api/index.js";

export default {
  data() {
    return {
      tableData: [],
      // 每页几条
      pageSize: 10,
      // 当前第几页
      currentPage: 1,
      total: 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await userListApi();
      // console.log(res);
      if (res) {
        this.tableData = res.data;
        this.total = res.data.length;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  computed: {
    currentList() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
};
</script>
